<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>


<body>
<div id="app">

    <div class="print-button-container">
        <!--搜索框-->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="班级名：">
                <el-input v-model="searchForm.task.cclasses.classesName" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="教师名：">
                <el-input v-model="searchForm.task.teacher.teacherName" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="教室名：">
                <el-input v-model="searchForm.room.roomName" placeholder="模糊查询"></el-input>
            </el-form-item>

            <el-form-item>
                <el-tooltip class="item" effect="dark" content="模糊查询获得的结果可能会被覆盖" placement="right">
                    <el-button type="primary" @click="selectByCondition">查询</el-button>
                </el-tooltip>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="printPage" icon="el-icon-printer">打印</el-button>
            </el-form-item>
        </el-form>

    </div>
    <!--  表格-->
    <el-table
            :data="tableData"
            stripe
            style="width: 100%"
    >

        <el-table-column
                fixed
                prop="time"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.time"></span>
            </template>
        </el-table-column>

        <el-table-column
                prop="Mon"
                label="星期一"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.Mon"></span>
            </template>
        </el-table-column>

        <el-table-column
                prop="Tues"
                label="星期二"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.Tues"></span>
            </template>
        </el-table-column>

        <el-table-column
                prop="Wed"
                label="星期三"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.Wed"></span>
            </template>
        </el-table-column>

        <el-table-column
                prop="Thur"
                label="星期四"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.Thur"></span>
            </template>
        </el-table-column>

        <el-table-column
                prop="Fri"
                label="星期五"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.Fri"></span>
            </template>
        </el-table-column>

        <el-table-column
                prop="Sat"
                label="星期六"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.Sat"></span>
            </template>
        </el-table-column>

        <el-table-column
                prop="Sun"
                label="星期天"
                align="center">
            <template slot-scope="scope">
                <span v-html="scope.row.Sun"></span>
            </template>
        </el-table-column>

    </el-table>


</div>


</body>

<!--导入资源-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/table.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        mounted() {
            this.selectByCondition();
        },
        methods: {


            printPage() {
                window.print();
            },

            selectByCondition() {
                //清空上次的查询数据 每次赋值一个新的空对象
                this.tableData = JSON.parse(JSON.stringify(this.clearTableData));
                console.log(this.tableData);
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/courseTable/selectTable",
                    data: this.searchForm
                }).then(function (resp) {
                    //设置表格数据
                    _this.toTable(resp.data)
                })
            },

            toTable(tableResult) {
                //获取的是下标！
                // tableResult[index].task.cclasses.classesName + "</br>" +
                for (let index in tableResult) {
                    var str = tableResult[index].task.cclasses.course.courseName + "</br>" +
                        tableResult[index].task.teacher.teacherName + "</br>" +
                        tableResult[index].task.startWeek + "-" + tableResult[index].task.endWeek + "周</br>" +
                        tableResult[index].room.roomName + "</br>";

                    if (tableResult[index].timeslot.id >= 1 && tableResult[index].timeslot.id <= 5) {
                        var i = (tableResult[index].timeslot.id - 1) % 5;
                        this.tableData[i].Mon = str;

                    }
                    if (tableResult[index].timeslot.id >= 6 && tableResult[index].timeslot.id <= 10) {
                        var i = (tableResult[index].timeslot.id - 1) % 5;
                        this.tableData[i].Tues = str;

                    }
                    if (tableResult[index].timeslot.id >= 11 && tableResult[index].timeslot.id <= 15) {
                        var i = (tableResult[index].timeslot.id - 1) % 5;
                        this.tableData[i].Wed = str;

                    }
                    if (tableResult[index].timeslot.id >= 16 && tableResult[index].timeslot.id <= 20) {
                        var i = (tableResult[index].timeslot.id - 1) % 5;
                        this.tableData[i].Thur = str;

                    }
                    if (tableResult[index].timeslot.id >= 21 && tableResult[index].timeslot.id <= 25) {
                        var i = (tableResult[index].timeslot.id - 1) % 5;
                        this.tableData[i].Fri = str;

                    }
                    if (tableResult[index].timeslot.id >= 26 && tableResult[index].timeslot.id <= 30) {
                        var i = (tableResult[index].timeslot.id - 1) % 5;
                        this.tableData[i].Sat = str;

                    }
                    if (tableResult[index].timeslot.id >= 31 && tableResult[index].timeslot.id <= 35) {
                        var i = (tableResult[index].timeslot.id - 1) % 5;
                        this.tableData[i].Sun = str;

                    }
                }

            },


        },
        data() {
            return {
                searchForm: {
                    task: {
                        cclasses: {
                            classesName: '',
                        },
                        teacher: {
                            teacherName: '',
                        },
                        startWeek: "",
                    },
                    room: {
                        roomName: ''
                    }
                },

                // time:["第一大节\n08:30-10:05","第二大节\n10：25-12:00",
                //     "第三大节\n14:00-15:35","第四大节\n15:55-17:30",
                //     "第五大节\n19:00-20:35",],

                tableResult: [],
                clearTableData: [
                    {time: " 第一大节 </br> 08:30-10:05 ", Mon: '', Tues: '', Wed: '', Thur: '', Fri: '', Sat: '', Sun: ''},
                    {
                        time: " 第二大节 </br>  10:25-12:00 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },
                    {
                        time: " 第三大节 </br>  14:00-15:35 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },
                    {
                        time: " 第四大节 </br>  15:55-17:30 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },
                    {
                        time: " 第五大节 </br>  19:00-20:35 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },],
                tableData: [
                    {time: " 第一大节 </br> 08:30-10:05 ", Mon: '', Tues: '', Wed: '', Thur: '', Fri: '', Sat: '', Sun: ''},
                    {
                        time: " 第二大节 </br>  10:25-12:00 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },
                    {
                        time: " 第三大节 </br>  14:00-15:35 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },
                    {
                        time: " 第四大节 </br>  15:55-17:30 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },
                    {
                        time: " 第五大节 </br>  19:00-20:35 ",
                        Mon: '',
                        Tues: '',
                        Wed: '',
                        Thur: '',
                        Fri: '',
                        Sat: '',
                        Sun: ''
                    },]

            }
        }
    })
</script>


</html>